<template>
  <footer class="s-footer">
    <div class="footer-box">
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <div class="title">友情链接:</div>
          <div class="list-content">
            <div class="list">大学生创业服务网</div>
            <div class="list">广州大学</div>
            <div class="list">双创学院</div>
            <div class="list">广州外语外贸大学</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="title">服务邮箱:</div>
          <div class="list-content">
            <div class="list">editor@163.com</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="title">联系电话:</div>
          <div class="list-content">
            <div class="list">020-1231223</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="title">QQ:</div>
          <div class="list-content">
            <div class="list">0123456789</div>
          </div>
        </el-col>
      </el-row>
      <hr class="line" />
      <div class="copyrigh">
        <div class="text">Copyright©2020 大学生双创软件学院 版权所有, 如有疑问, 请联系我们。</div>
        <div class="text">京粤ICP备17028573号-10</div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
.s-footer {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  // width: 100%;
  display: flex;
  justify-content: center;
  padding: 28px 0 18px;
  background:rgba(1,17,49,1);
  .footer-box {
    width: 1200px;
    .title {
      font-size:16px;
      color:rgba(217,217,217,1);
    }
    .list-content {
      margin-top: 12px;
      display: flex;
      justify-items: flex-start;
      flex-wrap: wrap;
      .list {
        margin: 8px 32px 0 0;
        font-size:16px;
        color:rgba(153,153,153,1);
        border-bottom: .5px solid transparent;
        transition: all .2s ease-in;
        cursor: pointer;
        &:hover {
          border-color: #D9D9D9;
          color:rgba(217,217,217,1);
        }
      }
    }
    .line {
      margin: 34px 0 18px;
      color:rgba(255,255,255,1);
      opacity:0.13;
    }
    .copyrigh {
      display: flex;
      justify-content: space-between;
      .text {
        font-size:14px;
        color:rgba(128,128,128,1);
        cursor: pointer;
        &:hover {
          border-color: #D9D9D9;
          color:rgba(217,217,217,1);
        }
      }
    }
  }
}
</style>
